<template>
  <h2>测试验证页面</h2>
  <h3>0.5px的线--transform: scale(1, 0.5)</h3>
  <div class="line-transform"></div>
  <h3>双边距重叠</h3>
  <div class="merge">
    <div></div>
    <div></div>
  </div>
  <h3>
    两个嵌套的 div，position 都是 absolute，子 div 设置 top 属性，那么这个
    top是相对于父元素的哪个位置定位的。
  </h3>
  <div class="position clearfix">
    <div>
      <div></div>
    </div>
  </div>
  <h3>硬币翻转的效果</h3>
  <div class="rotate">
    <div class="front">干前端</div>
    <div class="back">干翻前端</div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
  .line-transform {
    border-bottom: 1px solid red;
    transform: scale(1, 0.5);
  }
  .line-boxshadow {
    height: 1px;
    background: none;
    box-shadow: 0 0 0.5px 0 #000;
  }
  .merge {
    div {
      height: 5px;
      background-color: #ccc;
    }
    div:nth-child(1) {
      margin-bottom: 10px;
    }
    div:nth-child(2) {
      margin-top: 15px;
    }
  }
  .position {
    height: 30px;
    position: relative;
    div {
      width: 10px;
      height: 10px;
      background-color: #aaa;
    }
    div {
      position: absolute;
      top: 5px;
      left: 5px;
      margin: 5px;

      div {
        margin: 0;

        position: absolute;
        top: 10px;
        left: 10px;
      }
    }
  }
  .rotate {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px auto;
    // transition: all 1s;
    /* 子元素增加视距 */
    // perspective: 500px;
    /* 旋转时子元素保持3d效果 */
    // transform-style: preserve-3d;

    & > div {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      cursor: pointer;
      line-height: 100px;
      text-align: center;
      color: white;
      font-weight: 700;
      font-size: 18px;
    }

    .front {
      background-color: rgba(255, 106, 0);
      // transform: translateZ(1px);
      animation: rotate 5s linear infinite;
    }

    .back {
      background-color: rgba(51, 51, 51);
      // transform: rotateY(180deg);
      animation: rotate-back 5s linear infinite;
    }
  }
  @keyframes rotate {
    0% {
      z-index: 1;
      transform: rotateY(0);
    }
    50% {
      z-index: 0;
      transform: rotateY(180deg);
    }
    100% {
      z-index: 1;
      transform: rotateY(360deg);
    }
  }
  @keyframes rotate-back {
    0% {
      transform: rotateY(-180deg);
      z-index: -1;
    }
    50% {
      z-index: 0;
      transform: rotateY(0deg);
    }
    100% {
      z-index: -1;
      transform: rotateY(180deg);
    }
  }
</style>
